<template>
    <div class="group-container">
        <div class="head-sub" v-show='blurFlag'>
            <headersubaction :name='name1' :action='action' @zifocus='fufocus'></headersubaction>
        </div>
        <div class="mui-scroll-wrapper mui-content" :class="{active: blurFlag}">
            <div class="mui-scroll">
                <div class="setBg" v-show='focus'>
                    <headersearchsub :placeholder='placeholder' :action='action' :focus='focus'
                    v-on:fucallbackBlurflag='fucallBlurflag'></headersearchsub>
                    <!-- <headersearchsub :placeholder='placeholder' :action='action1'
                    > -->
                </div>
                <div>
                    <p class="newtext">群聊</p>
                    <ul class="mui-table-view group-history">
                        <li class="mui-table-view-cell mui-media new-li-text"
                        v-for="(item, index) in groupInfo"
                        :key='index'
                        :data-groupid='item.id'
                        >
                            <img class="mui-media-object mui-pull-left" src="../../assets/touxiang.jpg">
                            <div class="mui-media-body group-name">
                                {{item.name}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headersubaction from '../public/header/HeaderSubAction'
import headersearchsub from '../public/header/HeaderSearchSub'
// import {RESET_REVCIEVE_FRIENDS_POST} from '../../store/mutation-types'
import {mapState, mapActions} from 'vuex'
export default {
    data() {
        return {
            name1: this.$route.query.name,
            action: this.$route.query.action + '-group',
            blurFlag: true,
            placeholder: '群聊ID/群聊名称',
            action1: '群聊',
        // 点击搜索图标，让搜索的input获取到焦点
            focus: false
        }
    },
    components: {
        headersubaction,
        headersearchsub
    },
    mounted() {
        this.init()
        console.log(this.groupInfo)
    },
    computed: {
        ...mapState(['groupInfo'])
    },
    methods: {
        ...mapActions(['getGroupInfoSingle']),
        init() {
            var self = this
            self.$immui.init({
                // 滑动回弹
            swipeBack: false,
            // 手势事件设置
            gestureConfig: {
                // 单击
                tap: true,
                // 长按
                longtap: true,
                // 滑动
                swipe: true
            }
            })
            // mui滚动函数
        self.$immui('.mui-scroll-wrapper').scroll()
        //   接受好友请求
        self.$immui('.group-container').on('tap', '.new-li-text', function(e) {
            // console.log('点击跳转到群组的聊天', this.getAttribute('data-groupid'))
            let id = this.getAttribute('data-groupid')
            // 获取到群组的ID，获取群组的信息
            let temp = self.groupInfo.filter(f => f.id === id)
            console.log(temp[0], '8888888888888888')
            self.getGroupInfoSingle(temp[0])
            self.$router.push({path: '/groupchatview/' + id})
        })
        },
        fucallBlurflag(flag) {
            this.blurFlag = flag
            // 当失去焦点的时候，搜索组件不要获取到焦点
            this.focus = !flag
        //   console.log(flag)
        },
        fufocus(flag) {
            // 点击搜索按钮，搜索组件展示并获取到焦点
            this.focus = true
        }
    }
}
</script>
<style lang='scss' scoped>
.group-container {
    z-index: 12;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
}
.head-sub {
    height: 44px;
    position: relative;
}
.new-li-text{
    position: relative;
    top: 0;
    left: 0;
}
.btn-choose{
    position: absolute;
    top: 14%;
    right: 0;
    span{
        // width: 25vw;
    }
}
.mui-scroll-wrapper{
    &.active{
        top: 46px;
    }
}
.setBg{
    background: white;
}
.newtext{
    line-height: 40px;
    margin-bottom: 0;
    padding-left: 4px;
}
.group-name{
    line-height: 42px;
}
</style>
